<template>
  <div id="box" ref="boxRef">
    <div v-for="item in list">{{ item.name }}</div>
    <button @click="add">Add - {{ count }}</button>

    <Child v-show="showChild"></Child>
    <button @click="showChild = !showChild">hide child</button>
  </div>
</template>

<script>
import { onMounted, onBeforeMount, ref, onBeforeUpdate, onUpdated } from 'vue'
import axios from 'axios'
import Child from './components/Child.vue'

export default {
  components: {
    Child
  },
  setup() {  // 入口函数
    const list = ref([])
    const boxRef = ref(null)
    const count = ref(0)
    const showChild = ref(true)


    onMounted(() => {
      //console.log("mounted!", boxRef.value)
      //console.log("mounted!");

    })

    onBeforeMount(() => {
      //console.log("beforeMount!", boxRef.value)
      //console.log("beforeMount!");
      //发请求
      // axios.get('https://mock.mengxuegu.com/mock/66585c4db462b81cb3916d3e/songer/songer#!method=get')
      //   .then(res => {
      //     console.log(boxRef.value)
      //     //list.value = res.data.data
      //   })
    })


    onBeforeUpdate(() => {
      //console.log("beforeUpdate!")
    })
    onUpdated(() => {
      //console.log('onUpdated');
    })

    const add = () => {
      count.value++
    }

    return {
      list,
      boxRef,
      count,
      add,
      showChild
    }
  }
}
</script>

<style lang="css" scoped></style>